<!--
 * @name: 
 * @Author: 刘大可
 * @Date: 2023-03-09 10:28:05
 * @LastEditors: 刘大可
 * @LastEditTime: 2023-10-10 15:06:39
-->
<template>
    <view>
		<uni-nav-bar @clickLeft	="back" leftIcon="left" statusBar title="发券" fixed></uni-nav-bar>
        <view class="search row">
            <view class="cuIcon-search icon"></view>
            <input
                class="searchInput"
                v-model="searchValue"
                placeholder="请输入用户手机号"
                placeholder-class="input-placeholder"
              
            />
            <view class="search-btn row" @click="search">
                搜索
            </view>
        </view>
        <view class="userList">
            <block v-for="(item,index) in userList" :key="index">
                <view class="userItem row" :class="{cur:users.filter(i=>i==item.u_id).length>0}"
                        @click="changeUser(item)"
                    >
                    <image
                        class="avatar"
                        :src="item.avatar"
                        mode="scaleToFill"
                    />
                    <view class="flex-col">
                        <view class="name">{{ item.nickname }}</view>
                        <view class="phone row">
                            {{ item.phone }}
                            <view class="margin-left">
                               ID:{{ item.u_id }}
                            </view>
                        </view>
                        
                    </view>
                    <view class="price">
                       消费：￥{{ item.t_moneys }}
                    </view>
                </view>
            </block>
        </view>
        <view class="foot">
            <view class="padding-lr padding-tb-xs row w100">
                <uni-data-checkbox :selectedColor="style.color" multiple v-model="value" :localdata="range" @change="change"></uni-data-checkbox>
                <view class="enter row right" @click="submit">确定
                    <view v-if="users.length>0">
                       (已选 {{ users.length }}人)
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>
<script>
import uninavbar from '../../components/uni-nav-bar/uni-nav-bar.vue';
import uninavbar2 from '../../components/uni-data-checkbox/components/uni-data-checkbox/uni-data-checkbox.vue';
import main from "@/middleware/main"
export default {
    components: {
		"uni-nav-bar": uninavbar,
        "uni-data-checkbox": uninavbar2,

    },
    data() {
        return {
            params:{},
            searchValue:"",
            userList:[],
            users:[],
            value: [],
            range: [
                { "value": 1, "text": "全选" }, 
            ],
            style: {
                color: "#ff6344"
            },
            page:1
        }
    },
    onLoad(options) {
        this.page=1
        this.params=options
        this.initData(options)
    },
    onReachBottom(){
        this.page+=1
        this.initData(this.params,this.searchValue)
    },
    methods: {
        change(e){
            this.users= e.detail.value[0]?this.userList.map(item=>item.u_id):[]
            console.log(e.detail.value[0]);
        },
        async submit(){
            this.request("Businessuser/draw", {
                store_id: this.params.sid,
                coupons_id:this.params.id,
                u_ids:this.users.join(",")
            }).then(res => {
                console.log(res);
                if (res.data.status==200) {
                    this.tips.success(res.data.msg)
                } else {
                    
                }
            })
        },
        search(){
            this.page = 1
            this.users = []
            this.initData(this.params, this.searchValue)
        },
        back() {
            uni.navigateBack({ delta: 1 })
        },
        changeUser(item={}){
            this.users.filter(i=>i==item.u_id).length==0?
            this.users.push(item.u_id):
            this.users = this.users.filter(i => i != item.u_id)
        },
        async initData(params,phone=""){
            this.request("Businessuser/index", {
                store_id:params.sid,
                page:this.page,
                phone:this.searchValue
            }).then(res => {
                this.userList=this.page==1? res.data.data.data:[
                    ...this.userList,
                    ...res.data.data.data
                ]
            })
        }
    },
}
</script>
<style lang="scss">
    @import "./main.scss";
</style>